<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/ajax.js"></script>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
    <h1>同步请求 VS 异步请求</h1>
    <p><a href="hello">同步请求</a></p>
    <p onclick="ybqq01()">异步请求 - 原生实现</p>
    <p onclick="ybqq02()">异步请求 - JQuery-ajax 方法实现</p>
    <p onclick="ybqq03()">异步请求 - JQuery-get 方法实现</p>
    <p>响应内容：<span id="result"></span></p>

    <script>
        // 原生实现
        function ybqq01() {
            // 第一：创建 XMLHttpRequest 对象
            var req = getXmlHttp() ;

            // 第二：初始化 HTTP 请求参数
            req.open("get","ajax.do",true);

            // 第三：编写服务器端程序 - AjaxServlet - ajax.do
            // 第四：发送请求
            req.send("username=zs&password=123") ;

            // 第五：设置回调函数 - 监听请求-响应过程中，状态发生改变的事件
            req.onreadystatechange = function() {

                // 判断服务器是否成功响应数据，成功则获取数据，不成功，则不做处理
                if(req.readyState == 4 && req.status == 200) {
                    // 获取服务器响应的文本数据
                    var msg = req.responseText

                    // DOM 操作
                    document.getElementById("result").innerText = msg
                }
            }
        }

        // JQuery 实现 - $ 是 jQuery 的别名
        // data 传参有两种方式
        // 语法一（字符串）：参数1=值&参数2=值&...
        // 语法二（JavaScript对象）：{参数1:值,参数2:值,...}
        function ybqq02() {
            $.ajax({
                url:'ajax-jquery.do',            // 服务器程序的 URL 地址
                type:'get',                     // 请求方式
                data:'msg=好好学习&hour=5',     // 向服务器发送的数据
                dataType:'text',                // 设置响应数据的类型
                async:true,                     // 设置异步请求或同步请求
                success:function( res ) {       // 成功响应的回调函数
                    console.log('服务器响应回的数据为：',res)
                    $("#result").text(res)
                },
                beforeSend:function(){
                    console.log('发送异步请求之前，做一些处理...')
                },
                complete:function() {
                    console.log('请求完成之后，做一些处理...')
                },
                error:function(req, s, e) {
                    console.log(s)
                    console.log(e)
                    console.log("请求异常处理...联系管理员")
                }
            }) ;
        }

        function ybqq03() {
            let param = {
                msg:'好好学习',
                hour:5
            }

            $.get('ajax-jquery.do', param,function( res ){
                console.log('服务器响应回的数据为：',res)
                $("#result").text(res)
            }, 'text')
        }

    </script>


</body>
</html>